<template>
  <div class="header-container">
    <div class="menu-button" @click="openPersonInfo">
      <i class="iconfont">&#xe611;</i>
    </div>
    <div class="header-navs-container">
      <ul class="navs">
        <li class="navs-item">
          <router-link to="/"><i class="iconfont">&#xe60f;</i></router-link>
        </li>
        <li class="navs-item">
          <router-link to="/computer"><i class="iconfont">&#xe75e;</i></router-link>
        </li>
        <li class="navs-item">
          <router-link to="/pad"><i class="iconfont">&#xe737;</i></router-link>
        </li>
        <li class="navs-item">
          <router-link to="/earphone"><i class="iconfont">&#xe7ff;</i></router-link>
        </li>
      </ul>
    </div>
    <div class="center">
      <el-badge :value="storeLength" class="item">
        <router-link to="/compare">
          <i class="iconfont">&#xe610;</i>
        </router-link>
      </el-badge>

    </div>

  </div>
</template>

<script>

export default {
  computed: {
    storeLength() {
      return this.$store.state.phones.length;
    }
  },
  methods: {
    openPersonInfo() {
      this.$emit('personInfo')
    }
  }

};
</script>

<style lang='less' scoped>
* {
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  color: gray;
}

i {
  color: rgb(235, 235, 235);
}

.header-container {
  z-index: 1000;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 0px;
  background-color: #121418;

  // align-items: center;
  .menu-button {
    width: 50px;
    height: 50px;
    margin: auto 25px;
    cursor: pointer;
    align-items: center;
    line-height: 50px;

    i {
      font-size: 30px;
    }
  }

  .header-navs-container {
    width: 600px;
    height: 100%;

    .navs {
      display: flex;
      justify-content: space-around;
      height: 60px;
      margin-top: 0;
      align-items: center;

      .navs-item {
        list-style: none;
        border-radius: 15px;
        width: 50px;
        height: 50px;
        line-height: 50px;
        cursor: pointer;

        i {
          font-size: 35px;
        }
      }
    }
  }

  .center {
    width: 50px;
    height: 50px;
    margin: auto 25px;

    cursor: pointer;
    line-height: 50px;

    i {
      font-size: 30px;
    }
  }
}

/deep/ .el-badge__content.is-fixed {
  top: 10px;
}
</style>